<!--
 * @Author: lmk
 * @Date: 2021-11-24 15:03:13
 * @LastEditTime: 2021-12-09 14:33:10
 * @LastEditors: lmk
 * @Description: 
-->
<template>
	<view class="text-white">
		<slot name="loading"></slot>
		<slot></slot>
		<item-box padding="0">
			<!-- <view class="u-padding-bottom-40">
				<view>
					<text>{{title}}</text>
					<view class="subTitle">{{subTitle}}</view>
				</view>
				<slot></slot>
			</view>
			<slot name="loading"></slot> -->
			<view class="title u-font-32 u-border-bottom" v-if="title&&showTitle">{{title}}</view>
			<slot name="inner-slot"></slot>
			<view class="u-padding-bottom-44">
				<u-row>
					<u-col :span="3" v-for="(item,index) in list " :key="index">
						<view class="u-flex item" @click="goPath(item,title)">
							<view class="u-position-relative">
								<view class="notice" v-if="showRedNotice(item)"></view>
								<view class="icon-item u-flex u-row-center">
									<u-icon :name="item.icon" size="60" custom-prefix="index-custom-icon"
										:color="currentThemeObj.primary"></u-icon>
								</view>
								<view class="u-padding-top-20 text-order-time u-font-24 u-margin-bottom-10">{{item.label}}
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<slot name="tips"></slot>
		</item-box>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				default: '',
				type: String
			},
			subTitle: {
				default: '',
				type: String
			},
			list: {
				default: () => ([]),
				type: Array
			},
			showTitle: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			goPath(item, title) {
				const {
					modules,
					url
				} = item;
				const path = `${modules}/${url}/${url}`;
				this.$emit('goPath', {
					url: path,
					params: {
						...item,
						title
					}
				})
				this.itemClick(item);
			}
		},
	}
</script>
<style scoped lang="scss">
	.title {
		padding-left: 22rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		color: #333333;
	}

	.item {
		flex-direction: column;
		margin-top: 55rpx;
		position: relative;
	}

	.subTitle {
		font-size: 24rpx;
		color: #9A9A9A;
		margin-top: 11rpx;
	}
	.notice{
		right: 5rpx;
	}
	/deep/.u-col-3{
		padding: 0 !important;
	}
</style>
